<template>
  <div class="pxy20">

    <ElRow>
      <ElCol :span="4" :offset="1">
        <el-select v-model="listQuery.country" placeholder="请选择留学国家" clearable @change="getList">
          <el-option v-for="item, i in tagList" :key="i" :label="item" :value="item" />
        </el-select>
      </ElCol>
    </ElRow>

    <ElTable v-loading="loadShow" :data="list" border style="margin-top: 20px">
      <ElTableColumn label="序号" type="index" align="center" width="70" />
      <ElTableColumn label="姓名" prop="name" align="center" />
      <ElTableColumn label="手机号" prop="phone" align="center" />
      <ElTableColumn label="辅导内容/留学国家" prop="country" align="center" />
      <ElTableColumn label="备注" prop="remarks" align="center" />
      <ElTableColumn label="时间" prop="createTime" align="center" />
      <ElTableColumn label="操作" align="center">
        <template slot-scope="{ row }">
          <div>
            <el-popconfirm title="确定删除这条信息吗？" @confirm="del(row)">
              <el-button slot="reference" style="margin-left: 5px" type="danger" icon="el-icon-delete">删除</el-button>
            </el-popconfirm>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { GET_ENROLL_LIST, ENROLL_DEL } from '@/api/manage/enroll'
import Pagination from '@/components/Pagination'
export default {
  name: 'ManageEnroll',
  components: { Pagination },
  data() {
    return {
      loadShow: false,
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        size: 10,
        country: ''
      },
      tagList: [
        '英国',
        '加拿大',
        '新加坡',
        '中国香港',
        '中国澳门'
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loadShow = true
      // 这里突然用不了解构
      const data = await GET_ENROLL_LIST(this.listQuery)
      if (+data.result === 0) {
        this.list = data.data.rows
        this.total = data.data.total
        this.loadShow = false
      } else {
        this.$message({
          type: 'error',
          message: data.msg
        })
      }
    },
    del(row) {
      const ids = row.id
      ENROLL_DEL({ ids }).then((res) => {
        const i = res['result'] === 0
        this.$message({
          message: i ? '删除成功！' : '删除失败!' + res.msg,
          type: i ? 'success' : 'error',
          showClose: true
        })
        i ? this.getList() : ''
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
